<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>北极光之夜。</title>
	<style>
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		body {
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgb(0, 0, 0);
		}
		h1 {
			font-family: 'fangsong';
			font-size: 6em;
			color: transparent;
		}
		span {
			display: table-cell;
			animation: san 3s linear infinite;
		}
		/*制造时间差，让不同的时间不同的文字亮*/
		h1 span:nth-child(1) {
			animation-delay: 0s;
		}
		h1 span:nth-child(2) {
			animation-delay: 0.1s;
		}
		h1 span:nth-child(3) {
			animation-delay: 0.2s;
		}
		h1 span:nth-child(4) {
			animation-delay: 0.3s;
		}
		h1 span:nth-child(5) {
			animation-delay: 0.4s;
		}
		h1 span:nth-child(6) {
			animation-delay: 0.5s;
		}
		h1 span:nth-child(7) {
			animation-delay: 0.6s;
		}
		h1 span:nth-child(8) {
			animation-delay: 0.7s;
		}
		h1 span:nth-child(9) {
			animation-delay: 0.8s;
		}
		h1 span:nth-child(10) {
			animation-delay: 0.9s;
		}
		/*文字发亮的效果，就闪一下然后就又会（20%-80%的时候）变透明*/
		@keyframes san {
			0%, 100% {
				color: rgb(255, 255, 255);
				text-shadow: 0 0 5px rgb(1, 231, 247),
				0 0 15px rgb(1, 231, 247),
				0 0 25px rgb(1, 231, 247),
				0 0 50px rgb(1, 231, 247),
				0 0 80px rgb(1, 231, 247),
				0 0 120px rgb(1, 231, 247),
				0 0 160px rgb(1, 231, 247),
				0 0 200px rgb(1, 231, 247),
				0 0 300px rgb(1, 231, 247),
				0 0 400px rgb(1, 231, 247),
				0 0 500px rgb(1, 231, 247);
			}
			20%, 80% {
				color: transparent;
				text-shadow: none;
			}
		}
	</style>
</head>
<body>
	<h1>
		<span>佛</span> <span>主</span> <span>保</span> <span>佑</span> <span>，</span> <span>考</span> <span>试</span> <span>全</span> <span>过</span> <span>！</span>
	</h1>
</body>
</html>
